<template>
  <el-card shadow="never">
    <div slot="header">
      <el-button @click="$router.go(-1)">返回</el-button>
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card
          shadow="never"
          @click.native="handleItemClick(item)"
          class="mb20"
          v-for="(item,index) in list"
          :key="index"
        >
          <p class="flex">
            <span class="block-span">{{ Number(index+ 1) }}</span>
            <span>发生时间：{{ item.evalDate }}</span>
          </p>
          <p>奖惩情况：{{ item.rewardScroe || item.rewardMoney }}</p>
          <p>创建人：{{ item.creator }}</p>
          <p>创建时间：{{ item.createTime }}</p>
          <p>考评类型：{{ item.evalTypeName }}</p>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="责任人" name="1"></el-collapse-item>
          <el-collapse-item title="现场照片" name="2"></el-collapse-item>
          <el-collapse-item title="考评说明" name="3"></el-collapse-item>
        </el-collapse>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { getPersonalEventDetails } from '@/api/monitor'
import { getMonitorTime } from '@/utils/util'

export default {
  data() {
    return {
      list: [],
      row: JSON.parse(this.$route.query.row),
      activeNames: ['1']
    }
  },
  methods: {
    handleChange(val) {
      console.log('val', val)
    }
  },
  async created() {
    let param = getMonitorTime()
    const res = await getPersonalEventDetails({ ...param, userId: this.row.dutyUserId, evalItemId: this.row.evalItemId })
    if (res.state === '000000' && res.data.length > 0) {
      this.list = res.data
    } else {
      this.list = []
    }
  }
}
</script>

<style scoped>
.block-span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #1890ff;
  color: #ffffff;
  text-align: center;
  line-height: 20px;
  margin-right: 10px;
}
</style>